import {
  Graph,
  Edge,
  Shape,
  NodeView
} from '@antv/x6'


// 高亮
const magnetAvailabilityHighlighter = {
  name: 'stroke',
  args: {
    attrs: {
      fill: '#fff',
      stroke: '#47C769',
    },
  },
}
export default (node) => {
  const graph = new Graph({
    container: document.getElementById(node),
    width: 800,
    height: 600,
    // autoResize: true,
    // scroller: true,
    // snapline: true,
    background: {
      color: '#fffbe6', // 设置画布背景颜色
    },
    translating: {
      restrict(view) {
        let cell = view.cell
        if (cell.isNode()) {
          // console.log(cell);
          return {
            x: 0,
            y: cell.attrs.init.initY,
            width: 796,
            height: 60
          }
        }
      }
    },
    autoResize: true,
    resizing: {
      enabled: (view) => {
        return true
      },
      restricted: true,
      maxHeight: 60,
      minHeight: 60
    },
    grid: {
      visible: true,
      size: 4,
      type: 'doubleMesh',
      args: [{
          color: '#000', // 主网格线颜色
          thickness: 0.5, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 0.5, // 次网格线宽度
          factor: 10, // 主次网格线间隔
        },
      ],
    },
    highlighting: {
      magnetAvailable: magnetAvailabilityHighlighter,
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#fff',
            stroke: '#31d0c6',
          },
        },
      },
    },
    connecting: {
      snap: true,
      allowBlank: false,
      allowLoop: false,
      allowNode: false,
      allowEdge: false,
      highlight: true,
      connector: 'rounded',
      connectionPoint: 'boundary',
      router: "manhattan",
      createEdge(e) {
        console.log('createEdge', e);
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#000000',
              strokeWidth: 2,
              targetMarker: {
                name: 'classic',
                size: 1,
              },
              sourceMarker: {
                name: 'classic',
                size: 10,
              },
            },
          },
        })
      },
      validateMagnet({
        e,
        magnet,
        view,
        cell
      }) {
        // console.log(e);
        // console.log(magnet);
        // console.log(view);
        // console.log(cell);
        return true
      }
    },
  })

  graph.on('edge:removed', ({
    edge,
    options
  }) => {
    if (!options.ui) {
      return
    }
  })

  graph.on('edge:mouseenter', ({
    edge
  }) => {
    edge.addTools([
      'source-arrowhead',
      'target-arrowhead',
      {
        name: 'button-remove',
        args: {
          distance: -30,
        },
      },
    ])
  })
  graph.on('node:mouseenter', ({
    node
  }) => {
    node.addTools({
      name: 'button-remove',
      args: {
        x: '100%',
        y: 0,
        offset: {
          x: -10,
          y: 40
        }
      }
    });
  })
  graph.on('node:mouseleave', ({
    node
  }) => {
    node.removeTool("button-remove");
  })
  graph.on('edge:mouseleave', ({
    edge
  }) => {
    edge.removeTools()
  })
  graph.on('cell:change:*', (e) => {
    // console.log("change", e);
    // console.log(graph.toJSON());
  })
  return graph
}
